<template>
  <el-header
    class="header"
    style="
      padding: 0;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
      z-index: 9;
    "
  >
    <div class="header-content" style="">
      <div class="container">
        <div class="logo">
          <img src="@/assets/home/logo.png" alt="微小猪官网" />
        </div>
        <div style="display: flex; align-items: center; position: relative">
          <div class="custom-nav-menu">
            <div
              v-for="item in menuItems"
              :key="item.index"
              class="menu-item"
              :class="{ active: activeIndex === item.index }"
              @click="handleItemClick(item)"
            >
              <span class="menu-text">{{ item.label }}</span>
            </div>
          </div>
          <div class="header-actions">
            <!-- 未登录时显示 -->
            <div v-if="!isLogin" class="header-none-login">
              <el-button
                class="custom-btn login-btn"
                size="small"
                @click="handleLoginClick"
                >登录</el-button
              >
              <el-button
                style="font-size: 14px; padding: 10px 15px"
                class="custom-btn"
                >免费试用</el-button
              >
            </div>
            <!-- 登录后显示 -->
            <div v-else class="header-login">
              <div class="user-info" @mouseenter="showUserAccount = true">
                <!-- 显示用户头像和昵称 -->
                <div class="user-avatar" v-if="userInfo.headImage">
                  <img
                    v-if="userInfo.headImage"
                    :src="userInfo.headImage"
                    alt="用户头像"
                    class="avatar-small"
                  />
                  <img
                    v-else
                    src="@/assets/template/none_avatar.png"
                    alt="用户头像"
                    class="avatar-small"
                  />
                </div>
                <span v-if="userInfo.username">{{ userInfo.username }}</span>
              </div>
              <el-button
                class="custom-btn"
                size="small"
                @click="handleWorkbenchClick"
                >工作台</el-button
              >
            </div>
          </div>
          <!-- 悬浮的用户账户信息区域 - 添加v-show控制显示/隐藏 -->
          <!--  -->
          <div
            class="user-account-area"
            v-show="showUserAccount"
            @mouseenter="showUserAccount = true"
            @mouseleave="showUserAccount = false"
          >
            <!-- 账号部分 -->
            <div class="account-title-row">
              <div class="account-title">
                <i class="iconfont icon-zhanghao"></i>
                <span>账号</span>
              </div>
              <div size="small" class="logout-btn" @click="handleLogout">
                退出登录
              </div>
            </div>

            <!-- 用户信息部分 -->
            <div class="user-profile">
              <div class="avatar">
                <img
                  src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/391b1f56a776594dd2dd14076c4ce34.jpg"
                  alt="用户头像"
                />
              </div>
              <div class="user-info">
                <div class="user-name">云窗旅人</div>
                <div class="account-id">账号ID:{{ userInfo.aliUserId }}</div>
                <div class="enterprise-tag">企业认证</div>
              </div>
            </div>

            <!-- 我的资源部分 -->
            <div class="resource-section">
              <div class="section-title">
                <i class="iconfont icon-wodeziyuan" style="color: #333333"></i>
                <span>我的资源</span>
              </div>

              <div
                v-for="(resource, index) in resources"
                :key="resource.id"
                class="resource-item"
                :class="{ 'padding-top': index !== 0 }"
              >
                <div class="resource-main-info">
                  <div class="resource-name-row">
                    <span class="resource-name">{{ resource.name }}</span>
                    <span v-if="resource.tag" class="enterprise-tag border">{{
                      resource.tag
                    }}</span>
                  </div>
                  <div class="resource-actions">
                    <span class="scan-preview">{{ resource.category }}</span>
                  </div>
                  <span class="manage-system f12">扫码预览</span>
                </div>
                <div class="qrcode-container">
                  <div class="qrcode-box">
                    <img
                      :src="resource.qrcodeSrc"
                      :alt="`${resource.name}二维码`"
                      class="qrcode"
                    />
                  </div>
                </div>
              </div>
              <!-- 分隔线 -->
              <!--  -->
            </div>

            <!-- 我的权益部分 -->
            <div class="benefits-section">
              <div class="section-title">
                <i class="iconfont icon-wodequanyi" style="color: #333333"></i>
                <span>我的权益</span>
              </div>
              <div class="benefit-item">
                <div>试用中的产品</div>
                <span class="benefit-value">3</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--  运营详情弹窗-->
      <!-- <CustomElDialog
        :visible.sync="showDialog"
        width="770px"
        height="400px"
        title=""
        overlay-bg-color="rgba(0,0,0,0.8)"
        close-btn-position="top-right"
        dialog-bg-color="#f5f7fa"
        :has-top-image="true"
        top-image-position="left"
        :close-on-overlay-click="true"
        :dialogBgImage="$serverImgUrl + 'AI_back3.png'"
        dialogRadius="15px"
        dialogMarginTop="50px"
         :close-btn-top="'-180px'"
         :close-btn-right="'100px'"
         closeBtnColor="#323232"
        :dialogWrapperStyle="{
          display: 'flex',
  alignItems: 'center',
          marginTop: '10vh',
        }"
      >
        <template #content>
          <div style="text-align: center">
            <div
              style="
                height: 339px;
                background-size: 794px 274px;
                background-position: -15px 54px;
                background-repeat: no-repeat;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                display: flex;
                justify-content: center;
              "
            >
              <div
                style="
                  background-image: url('https://lingxin1314.oss-cn-beijing.aliyuncs.com/weixiaozhu/popup8.png');
                  height: 450px;
                  width: 600px;
                  background-size: cover;
                  margin-top: -257px;
                  padding: 20px;
                  text-align: left;
                  padding: 0 30px;
                  color: #26426C;
                "
              >
              <h3 style="font-size: 22px; font-weight: bold;text-align: center;padding-top: 20px;">2025年9月公众号运营数据总结</h3>
              <p style="margin-top: 10px;"> <span style="padding-left: 20px;"></span> 新增关注数：本月公众号新增关注数为1286 人，与上月相比，呈现上升趋势，变动幅度为18.2%。</p>
              <p><span style="padding-left: 20px;"></span>发布文章数：核心数值为14 篇，文章发布频率保持在每周 3-4 篇，发布时间主要分布在周一、周三晚上 20:00，周五中午 12:30，此时间段用户打开率较其他时段高出 25%。​</p>
              <p><span style="padding-left: 20px;"></span>爆款文章：析​题目：《2025 职场人必备：3 个高效复盘工具，帮你告别无效努力》​，阅读量：该文章阅读量高达15682 次，占本月总阅读量的 32.2%，成为本月最受欢迎的文章。</p>
              <p><span style="padding-left: 20px;"></span>总阅读量：总阅读量达48632 次，平均每篇文章阅读量为3473 次。与上月相比，总阅读量上升了12.5%。​</p>
              <p><span style="padding-left: 20px;"></span>取消关注数：本月取消关注人数为198 人，取消关注率为1.5%（低于行业平均 2.2% 的水平）。​</p>
              <p><span style="padding-left: 20px;"></span>粉丝总数：截至 9 月底，公众号粉丝总数达到13258 人，较上月增长了10.7%。​</p>
              <p><span style="padding-left: 20px;"></span>​通过对本月公众号运营数据的分析，可以看出在内容创作（职场干货类内容精准匹配用户需求）和用户增长（多渠道联动引流）方面有一定成果，提升用户留存率与活跃度，进一步推动粉丝基数向 1.5 万突破。​​</p>
            </div>
            </div>

            <div
              style="
                position: absolute;
                left: 0;
                width: 100%;
                height: 233px;
                background-size: cover;
                background-repeat: no-repeat;
                bottom: 0;
                z-index: 99;
                background-image: url('https://lingxin1314.oss-cn-beijing.aliyuncs.com/weixiaozhu/popup7.png');
              "
            ></div>
          </div>
        </template>
        <template #footer>
          <div style="text-align: center;z-index: 100;position: absolute;bottom: 20px;display: flex;justify-content: center;width: 100%;">
            <el-button
              class="custom-btn "
              @click="handleSubmit"
              style="background: linear-gradient(283deg, #1D3D7C 0%, #375798 100%);width: 170px;margin-right: 20px;"
              >好的</el-button
            >
          </div>
        </template>
      </CustomElDialog> -->
      <!--  每月运营总结弹窗-->
      <!-- <CustomElDialog
        :visible.sync="showDialog"
        width="700px"
        height="310px"
        title=""
        overlay-bg-color="rgba(0,0,0,0.7)"
        close-btn-position="top-right"
        dialog-bg-color="#f5f7fa"
        :has-top-image="true"
        top-image-position="left"
        :close-on-overlay-click="true"
        :dialogBgImage="$serverImgUrl + 'AI_back3.png'"
        dialogRadius="15px"
        :dialogWrapperStyle="{
          display: 'flex',
          alignItems: 'center',
        }"
      >
        <template #topContent>
          <div class="custom-top-content">
            <img :src="$serverImgUrl + 'AI_back2.png'" />
          </div>
        </template>
        <template #content>
          <div
            class="custom-content"
            style="margin-top: 10px; padding-left: 10px"
          >
            <span style="font-size: 22px; font-weight: bold; color: #26426c"
              >2025年9月公众号运营数据总结</span
            >
            <p
              style="
                margin-top: 30px;
                margin-right: 25px;
                font-size: 16px;
                font-weight: normal;
                line-height: 25px;
                letter-spacing: 0em;
                color: #26426c;
              "
            >
              <span style="padding-left: 30px"> 【运营通知】</span>您的 2025 年
              X 月公众号运营数据总结已生成，核心数据包含新增关注 XX 人、总阅读
              XX 次、粉丝总数 XX 人及本月爆款文章《XXX》（阅读量 XX 次、转发量
              XX 次）；
            </p>
          </div>
        </template>
        <template #footer>
          <div class="custom-footer">
            <el-button class="custom-btn">查看完整报告</el-button>
          </div>
        </template>
      </CustomElDialog> -->
    </div>
  </el-header>
</template>

<script>
import { color } from "echarts";
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  name: "NavBar",
  data() {
    return {
      outerVisible: false,
      showDialog: true,
      confirmLoading: false,
      resources: [
        {
          id: 1,
          name: "智慧园区",
          tag: "使用中",
          category: "工业制造",
          qrcodeSrc: require("@/assets/home/phone.png"),
        },
        {
          id: 2,
          name: "智慧园区",
          tag: null,
          category: "工业制造",
          qrcodeSrc: require("@/assets/home/phone.png"),
        },
      ],
      activeIndex: "1",
      menuItems: [
        { index: "1", label: "首页", url: "/" },
        { index: "2", label: "产品介绍", url: "/productIntroduce" },
        { index: "3", label: "产品中心", url: "/productCenter" },
        { index: "4", label: "关于我们", url: "/aboutUs" },
        { index: "5", label: "价格", url: "/price" },
        { index: "6", label: "联系我们", url: "/contactUs" },
        { index: "7", label: "易捷购物", url: "/easyShop" },
      ],
      // 添加控制显示/隐藏的状态变量
      showUserAccount: false,
    };
  },
  computed: {
    // 根据vuex
    // 引用user模块的state
    ...mapState("home", ["NavActiveIndex"]),
    // 从user模块获取登录状态和用户信息
    ...mapGetters("user", ["isLogin", "userInfo"]),
  },
  // 监听vuex中的NavActiveIndex变化
  created() {
    // 获取产品介绍区域元素
    console.log("监听vuex是否变化", this.$imagePath);
    this.activeIndex = this.NavActiveIndex;
    // 初始化时根据当前路由设置activeIndex
    //  this.setActiveIndexByRoute();
  },
  watch: {
    // 监听路由对象的变化
    // $route(to, from) {
    //   // to: 即将进入的路由对象
    //   // from: 即将离开的路由对象
    //   console.log('路由变化了', to, from);
    //   // 可以在这里更新导航栏状态，如高亮当前菜单项
    //   // this.updateActiveNav(to.path);
    // }
    // 添加对NavActiveIndex的监听
    NavActiveIndex(newValue) {
      console.log("NavActiveIndex变化了", newValue);
      this.activeIndex = newValue;
    },
  },

  // 添加路由监听
  mounted() {
    // 监听路由变化
    // this.$router.afterEach(() => {
    //   this.setActiveIndexByRoute();
    // });
  },
  methods: {
    // 引用home模块的mutation
    ...mapMutations("home", ["setNavbarActive"]),
    // 引用user模块的action
    ...mapActions("user", ["logout"]),
    // 根据当前路由设置activeIndex
    // setActiveIndexByRoute() {
    //   const currentPath = this.$route.path;
    //   // 查找当前路由对应的菜单项
    //   const matchedItem = this.menuItems.find(item => item.url === currentPath);

    //   if (matchedItem) {
    //     this.activeIndex = matchedItem.index;
    //     this.setNavbarActive(matchedItem.index);
    //   } else {
    //     // 如果没有精确匹配，尝试查找是否为某个菜单项的子路由
    //     const parentItem = this.menuItems.find(item =>
    //       currentPath.startsWith(item.url) && item.url !== '/'
    //     );

    //     if (parentItem) {
    //       this.activeIndex = parentItem.index;
    //       this.setNavbarActive(parentItem.index);
    //     } else {
    //       // 默认选中首页
    //       this.activeIndex = "1";
    //       this.setNavbarActive("1");
    //     }
    //   }
    // },
    // 工作台点击
    handleWorkbenchClick() {
      console.log("工作台点击");
      this.showDialog = true;
      // 跳转我的资源
      // this.$router.push({
      //   path: "/myResources",
      //   query: {
      //     // companyName: this.companyName,
      //     // themeColor: this.selectedThemeColor,
      //   },
      // });
    },
    handleItemClick(item) {
      const element = document.getElementById("product-section");
      // const elementFooter = document.getElementById("footer");
      this.$emit("handleItemClick", item.index);
      this.setNavbarActive(item.index);
      console.log(
        "navbar中打印store",
        this.NavActiveIndex,
        localStorage.getItem("NavActiveIndex"),
        element
      );
      // if (item.index == 4 || item.index == 6) {
      //   if (elementFooter) {
      //     // 滚动到该元素位置
      //     element.scrollIntoView({
      //       behavior: "smooth",
      //       block: "start",
      //     });
      //   }
      // }
      // 滚动到产品介绍组件为止
      // if (item.index == 2) {
      //   if (element) {
      //     // 滚动到该元素位置
      //     element.scrollIntoView({
      //       behavior: "smooth",
      //       block: "start",
      //     });
      //   }
      // }
      this.activeIndex = item.index;
      this.$router.push(item.url);
    },

    // 添加登录按钮点击事件处理方法
    handleLoginClick() {
      // 使用Vue Router跳转到登录页面
      this.$router.push("/login");
    },

    // 添加退出登录方法
    handleLogout() {
      this.logout()
        .then(() => {
          this.showUserAccount = false;
          this.$message.success("退出登录成功");
          // 刷新页面或跳转到登录页，根据项目需求选择
          // 方案1: 跳转到登录页
          this.$router.push("/login");
          // 方案2: 刷新当前页面（保持在当前页但显示未登录状态）
          // this.$router.go(0); // 可选，根据需要决定是否刷新
        })
        .catch((error) => {
          console.error("退出登录失败", error);
          this.$message.error("退出登录失败");
        });
    },
  },
  // 添加watch来监听路由变化
};
</script>

<style scoped lang="scss">
// 弹窗内容相关样式 后续待剪切
.custom-top-content {
  /* 主色 */
  background: #348cf8;

  box-shadow: inset -16px -8px 10px 0px #66aaff,
    inset 11px 14px 10px 0px rgba(102, 170, 255, 0.3);
  width: 76px;
  height: 77px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30px;
  img {
    max-height: 40px;
  }
}
/* 自定义按钮样式 - 统一背景色 */
.custom-footer {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.custom-nav-menu {
  display: flex;
  align-items: center;
}

.menu-item {
  font-size: 16px;
  padding: 0 20px;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
  color: #333;
  position: relative;
  transition: color 0.3s ease;

  &:hover {
    color: #348cf8;
  }

  &.active {
    color: #348cf8;
    font-weight: bold;
  }
}
.menu-text {
  position: relative; /* 设置为相对定位，作为绝对定位元素的参考 */
  padding-bottom: 16px;
}

/* 使用伪元素::after为选中的菜单项添加下划线 */
.menu-item.active .menu-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 8px); /* 下划线宽度比文字稍宽 */
  height: 3px;
  background-color: #348cf8;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
/* 导航栏样式 */
::v-deep.el-header {
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3) !important;
  // height: 70px !important;
}
// .header {
//   box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
// }
// .header-content {
//   box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
// }

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1200px;
  position: relative;
  // margin: 0 auto;
  // padding: 0 20px;
}

.logo {
  // display: flex;
  // align-items: center;
}

.logo img {
  // width: 40px;
  // height: 40px;
  // margin-right: 10px;
}

.header-actions {
  display: flex;
  gap: 10px;
}
.header-login {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  display: inline-block;
  margin-right: 8px;
}

.avatar-small {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

/* 悬浮的用户账户信息区域样式 */
.user-account-area {
  position: absolute;
  right: 0;
  top: 73%;
  margin-top: 10px;
  z-index: 1000;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  width: 320px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* 防止影响其他布局的重要样式 */
  position: absolute;
  right: 0;
  overflow: hidden;
}

/* 添加一个小三角形指示箭头 */
.user-account-area::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid white;
}

.user-account-area::after {
  content: "";
  position: absolute;
  top: -9px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #e8e8e8;
  z-index: -1;
}

/* 账号标题行 */
.account-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.account-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.account-title i {
  margin-right: 8px;
}
.logout-btn:hover {
  background-color: #348cf8 !important;
  color: #fff !important;
}
.logout-btn {
  cursor: pointer;
  padding: 4px 15px;
  font-size: 12px;
  background-color: #fff !important;
  color: #348cf8 !important;
  border: 1px solid #348cf8 !important;
  border-radius: 4px !important;
}

/* 用户信息部分 */
.user-profile {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  background-color: #f0f0f0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.account-id {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.enterprise-tag {
  display: inline-block;
  width: 64px;
  height: 27px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: bold;
  color: #6e4430;
  background: linear-gradient(291deg, #eeb465 0%, #fadab8 50%, #e7b58d 100%);
  border: 1px solid #fdecda;
  box-shadow: inset 0px 4px 10px 0px #fbe7cd;
  line-height: 24px;
  text-align: center;
}
.border {
  border: 1px solid #dfab74;
}

/* 我的资源部分 */
.resource-section {
  padding: 16px 20px;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

.section-title i {
  margin-right: 8px;
  color: #1890ff;
}

/* 资源项 */
.resource-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #d8d8d8;
}
.padding-top {
  padding-top: 20px;
}

.resource-main-info {
  flex: 1;
}

.resource-name-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.resource-name {
  font-size: 14px;
  color: #333;
  margin-right: 10px;
}

.resource-actions {
  display: flex;
  align-items: center;
  font-size: 12px;
  padding-bottom: 18px;
}

.scan-preview {
  color: #666;
  margin-right: 20px;
}

.manage-system {
  color: #1890ff;
  cursor: pointer;
}

.qrcode-container {
  margin-left: 10px;
  text-align: center;
}
.qrcode-box {
  background-color: #d6e8fe;
  padding: 6px 20px 10px 20px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.qrcode {
  max-width: 47px;
  height: 70px;
}

/* 分隔线 */
.divider {
  height: 1px;
  background-color: #f0f0f0;
  margin: 8px 0;
}

/* 我的权益部分 */
.benefits-section {
  margin: 0px 20px 16px 20px;
  padding-top: 10px;
}

.benefit-item {
  align-items: center;
  font-size: 14px;
}

.benefit-value {
  font-weight: bold;
  color: #1890ff;
  font-size: 16px;
  padding-top: 10px;
}
/* 过渡动画样式 */
.modal-fade-enter-active,
.modal-fade-leave-active,
.modal-zoom-enter-active,
.modal-zoom-leave-active,
.modal-slide-up-enter-active,
.modal-slide-up-leave-active,
.modal-slide-down-enter-active,
.modal-slide-down-leave-active {
  transition: all 0.3s ease;
}

/* 淡入淡出动画 */
.modal-fade-enter-from .modal-mask,
.modal-fade-leave-to .modal-mask {
  opacity: 0;
}

.modal-fade-enter-from .modal-dialog,
.modal-fade-leave-to .modal-dialog {
  opacity: 0;
}
</style>
